// 基于准备好的dom，初始化echarts实例
let number = echarts.init(document.getElementById('number'));
let rate = echarts.init(document.getElementById('rate'));

let school_list = new Array();
let man_number = new Array();
let woman_number = new Array();
let total_number = new Array();


let number_option = {
    legend: {
        data: ['男', '女', '总数'],
        left: 10
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: false
            },
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        bottom: 90
    },
    dataZoom: [{
        type: 'inside'
    }, {
        type: 'slider'
    }],
    xAxis: {
        type: 'category',
        data: school_list,
        silent: false,
        splitLine: {
            show: false
        },
        splitArea: {
            show: false
        },
        axisLabel: {
            formatter: function (value) {
                return value.split("").join("\n");
            }
        }
    },
    yAxis: {
        splitArea: {
            show: false
        }
    },
    series: [
        {
            name: '男',
            type: 'bar',
            data: man_number,
            // Set `large` for large data amount
            large: true
        },
        {
            name: '女',
            type: 'bar',
            data: woman_number,
            // Set `large` for large data amount
            large: true
        },
        {
            name: '总数',
            type: 'bar',
            data: total_number,
            // Set `large` for large data amount
            large: true
        }]
};
let rate_option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '男女比例',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 0, name: '男'},
                {value: 0, name: '女'}
            ]
        }
    ]
};

number.setOption(number_option);
rate.setOption(rate_option);

number.on('click', function (params) {
    if (params.seriesIndex == 2) {
        rate_option.series[0].data[0].value = number_option.series[0].data[params.dataIndex];
        rate_option.series[0].data[1].value = number_option.series[1].data[params.dataIndex];
    } else {
        a = params.value;
        b = number_option.series[1 - params.seriesIndex].data[params.dataIndex];
        if (params.seriesIndex == 0) {
            rate_option.series[0].data[0].value = a;
            rate_option.series[0].data[1].value = b;
        } else {
            rate_option.series[0].data[0].value = b;
            rate_option.series[0].data[1].value = a;
        }
    }
    rate_option.title.text = number_option.xAxis.data[params.dataIndex];
    rate.setOption(rate_option);
});

$.ajax({
    type: "GET",
    url: '/schoolRank/menAndFemaleNum',
    success: function (res) {
        for (let i = 0; i < res.length; i++) {
            if (res[i].menNum + res[i].femaleNum == 0) continue;
            school_list.push(res[i].schoolName);
            man_number.push(res[i].menNum);
            woman_number.push(res[i].femaleNum);
            total_number.push(res[i].menNum + res[i].femaleNum);
        }
        number_option.series[0].data = man_number;
        number_option.series[1].data = woman_number;
        number_option.series[2].data = total_number;
        number_option.xAxis.data = school_list;

        number.setOption(number_option);
    },
    cache: false
});